<template>
  <div class="pdf-container">
    <div class="pdf-content">
      <canvas v-for="pageIndex in pdfPages" :id="'pdf-canvas-'+pageIndex" :key="pageIndex"></canvas>
    </div>
    <div class="pdf-operation">
      <span @click="zoomIn()"><van-icon name="plus" /></span>
      <span @click="zoomOut()"><van-icon name="minus" /></span>
    </div>
  </div>
</template>
<script lang="ts">
import { Options, Vue } from 'vue-class-component'
import * as PdfJs from 'pdfjs-dist/legacy/build/pdf.js'
import Report from '@/assets/js.pdf'

@Options({})
export default class UsePdfJs extends Vue {
  pdfScale = 0.6
  pdfPages = 0
  pdfDivWidth = ''
  pdfSrc = null
  pdfDoc: any = {}
  orginScale = 1
  isOrginScaleSetted = false

  created () {
    this.loadFile(Report)
  }

  zoomIn () {
    this.pdfScale = this.pdfScale + 0.1
    this.loadFile(Report)
  }

  zoomOut () {
    this.pdfScale = this.pdfScale - 0.1
    this.loadFile(Report)
  }

  loadFile (url: string): void {
    PdfJs.GlobalWorkerOptions.workerSrc = require('pdfjs-dist/build/pdf.worker.entry')
    const loadingTask = PdfJs.getDocument(url)
    loadingTask.promise.then((pdf) => {
      this.pdfDoc = pdf
      this.pdfPages = this.pdfDoc.numPages
      this.$nextTick(() => {
        this.renderPage(1)
      })
    })
  }

  renderPage (num: any) {
    this.pdfDoc.getPage(num).then((page: any) => {
      const canvasId = 'pdf-canvas-' + num
      const canvas: any = document.getElementById(canvasId)
      const ctx: any = canvas.getContext('2d')
      const dpr = window.devicePixelRatio || 1
      const bsr = ctx.webkitBackingStorePixelRatio ||
                  ctx.mozBackingStorePixelRatio ||
                  ctx.msBackingStorePixelRatio ||
                  ctx.oBackingStorePixelRatio ||
                  ctx.backingStorePixelRatio ||
                  1
      const ratio = dpr / bsr
      if (!this.isOrginScaleSetted) {
        this.orginScale = document.documentElement.clientWidth / page.view[2]
        this.pdfScale = this.orginScale
      }
      const viewport = page.getViewport({ scale: this.pdfScale })
      canvas.width = viewport.width * ratio
      canvas.height = viewport.height * ratio
      canvas.style.width = viewport.width + 'px'
      this.pdfDivWidth = viewport.width + 'px'

      canvas.style.height = viewport.height + 'px'
      ctx.setTransform(ratio, 0, 0, ratio, 0, 0)
      const renderContext = {
        canvasContext: ctx,
        viewport: viewport
      }
      page.render(renderContext)
      if (num < this.pdfPages) {
        this.renderPage(num + 1)
      }
    })
  }
}
</script>
<style lang="less">
.pdf-container {
  .pdf-operation {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
    span {
      background-color: #fff;
      opacity: 0.7;
      display: inline-block;
      border-radius: 3px;
      margin-left: 15px;
      width: 17px;
      height: 17px;
      border: #111 solid 0.5px;
    }
  }
}

</style>
